<template>
    <div class="center-cmp">
        <div class="cc-header">
            培训概况
        </div>
        <div class="cc-details">
            <div class="cc-item">
                <GradeRating :option="option" title="签到率" title-position="top">
                </GradeRating>
                <!-- <dv-charts :option="option" style="width:150px;height:150px;"/> -->
            </div>
            <div class="cc-item">
                <GradeRating :option="option" title="合格率" title-position="top">
                </GradeRating>
            </div>
        </div>
        <div class="cc-details-bottom">
            <line-chart :options="boxplotOptions" style="width:100%;height:100%;"></line-chart>
        </div>
    </div>
</template>

<script setup name="Growth">
import WaterLevelPond from '@/views/dashboard/components/datav/WaterLevelPond.vue';
import GradeRating from '@/views/dashboard/components/datav/GradeRating.vue';
import LineChart from '@/views/dashboard/components/datav/LineChart.vue';

const { proxy } = getCurrentInstance();
const { product_area } = proxy.useDict('product_area');


const planterList = ref([])

const taskAmount = 123;
const followupAmount = 123;

const cardStyle = {
    border: '2px solid #3498db'
};

const wlpStyle = {
    width: "80px",
    height: "80px"
}

const config = reactive({
    data: [98],
    shape: 'round',
})

const option = reactive({
    series: [
        {
            type: 'gauge',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            data: [
                { name: 'itemA', value: 89, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
            ],
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            pointer: {
                show: false
            },
            dataItemStyle: {
                lineCap: 'round'
            },
            details: {
                show: true,
                formatter: '{value}%',
                style: {
                    fill: '#1ed3e5',
                    fontSize: 18
                }
            }
        }
    ]
})


const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 500,
        asId: null,
        productId: null,
        year: null,
    },
    rules: {
        productAreaId: [
            { required: true, message: "产区不能为空", trigger: "blur" }
        ],
        planterId: [
            { required: true, message: "种植主体不能为空", trigger: "blur" }
        ]
    }
});
const { queryParams, rules } = toRefs(data);

function makeData() {
    let data = [];
    for (let i = 0; i < 18; i++) {
        let cate = [];
        for (let j = 0; j < 100; j++) {
            cate.push(Math.random() * 200);
        }
        data.push(cate);
    }
    return data;
}
const data0 = makeData();
const data1 = makeData();
const data2 = makeData();

const boxplotOptions = {
    dataset: [
        {
            source: data0
        },
        {
            source: data1
        },
        {
            source: data2
        },
        {
            fromDatasetIndex: 0,
            transform: { type: 'boxplot' }
        },
        {
            fromDatasetIndex: 1,
            transform: { type: 'boxplot' }
        },
        {
            fromDatasetIndex: 2,
            transform: { type: 'boxplot' }
        }
    ],
    legend: {
        top: '10%'
    },
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '10%',
        top: '20%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        nameGap: 30,
        splitArea: {
            show: true
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        name: 'Value',
        min: -400,
        max: 600,
        splitArea: {
            show: false
        }
    },
    series: [
        {
            name: 'category0',
            type: 'boxplot',
            datasetIndex: 3
        },
        {
            name: 'category1',
            type: 'boxplot',
            datasetIndex: 4
        },
        {
            name: 'category2',
            type: 'boxplot',
            datasetIndex: 5
        }
    ]
}

</script>

<style lang="scss" scoped>
.center-cmp {
    width: 100%;

    .cc-header {
        width: 100%;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .cc-details {
        height: 40%;
        display: flex;
        margin: 20px;
        justify-content: center;
        font-size: 18px;
        align-items: center;

        .cc-item {
            width: 50%;
        }
    }

    .cc-details-bottom {
        height: 60%;
        display: flex;
        margin: 20px;
        justify-content: center;
        font-size: 18px;
        align-items: center;
    }

    .cc-main-container {
        position: relative;
        flex: 1;
        display: flex;

        .ccmc-middle {
            width: 50%;
            height: 90%;

            .active-ring-name {
                font-size: 20px !important;
            }
        }

        .ccmc-left,
        .ccmc-right {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 24px;

            span {
                font-size: 40px;
                font-weight: bold;
            }

            .station-info {
                height: 80px;
                display: flex;
                align-items: center;
            }
        }

        .ccmc-left {
            align-items: flex-end;

            span {
                margin-left: 20px;
            }
        }

        .ccmc-right {
            align-items: flex-start;

            span {
                margin-right: 20px;
            }
        }
    }

    .label-tag {
        position: absolute;
        width: 500px;
        height: 30px;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
